<template>
  <div id="app">
    <vue-read-progress
      color="#5352ed"
      opacity="1"
      height="5px"
      :shadow="true"
    />
    <transition name="menuToggle">
      <header class="topHeader" v-show="topMenu">
        <TopMenu />
      </header>
    </transition>
    <transition name="menuToggle">
      <header class="header" v-show="!topMenu" ref="header">
        <Menu />
      </header>
    </transition>
    <router-view />
    <BackTop :open="backTop" />
    <footer class="site_foot">
      <Foot />
    </footer>
  </div>
</template>


<script>
import VueReadProgress from "vue-read-progress";
import TopMenu from "./components/TopMenu.vue";
import Menu from "./components/Menu.vue";
import BackTop from "./components/BackTop.vue";
import Foot from "./components/Foot.vue";
import { Rain } from "./utils/rain";
export default {
  components: {
    VueReadProgress,
    TopMenu,
    Menu,
    BackTop,
    Foot,
  },
  data() {
    return {
      topMenu: true,
      backTop: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    Rain({
      seepd: 9,
      wind_direction: 250,
      maxNum: 1000,
      numLevel: 3,
      drop_chance: 0.5,
      gravity: 0.103,
    });
  },
  updated() {},
  computed: {
    darkSkin() {
      return this.$store.state.darkSkin;
    },
  },
  methods: {
    //顶部菜单显示隐藏
    handleScroll(e) {
      const topHeight = document.documentElement.scrollTop;
      if (topHeight > 110) {
        this.topMenu = false;
        this.backTop = true;
      } else {
        this.topMenu = true;
        this.backTop = false;
      }
    },
  },
  watch: {
    darkSkin: {
      handler: function (newVal, oldVal) {
        const header = this.$refs.header;
        newVal ? header.classList.add("dark") : header.classList.remove("dark");
      },
    },
  },
};
</script>

<style>
@import url("./assets/iconfont/iconfont.css");
@import url("./assets/css/theme-dark.css");
* {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
body::-webkit-scrollbar {
  width: 7px;
  height: 5px;
}
body::-webkit-scrollbar-thumb {
  background-color: #83b7eb;
  border-radius: 10px;
}
body::-webkit-scrollbar-track-piece {
  background-color: #e6e6e6;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: #2e78c2;
}
@media only screen and (max-width: 768px) {
  html {
    font-size: 10px;
  }
}
@media only screen and (min-width: 768px) {
  html {
    font-size: 13px;
  }
}
@media only screen and (min-width: 992px) {
  html {
    font-size: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  html {
    font-size: 16px;
  }
}
#app {
  position: relative;
}
.topHeader {
  display: flex;
  position: fixed;
  top: 0;
  width: 100%;
  height: 55px;
  justify-content: flex-end;
  z-index: 999;
}
.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 55px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
}
.header.dark {
  background-color: #353535;
  color: #a9a9b3;
}
.site_foot {
  width: 100%;
  height: 35vh;
}
</style>